<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设置我的资料</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/css/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">设置我的资料</div>
                <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                    <i class="layui-icon layui-icon-upload"></i> 单图片上传
                </button>
                <div style="width: 132px;">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                        <div id="ID-upload-demo-text"></div>
                    </div>
                    <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
                <div class="layui-card-body" pad15>

                    <div class="layui-card-header">头像</div>
                    <div class="layui-card-body">

                        <div class="layui-inline">
                            <img src="https://unpkg.com/outeres/demo/avatar/0.png" class="layui-circle">
                        </div>

                    </div>
                    <div class="layui-form" lay-filter="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <input name="avatar" lay-verify="required" id="LAY_avatarSrc" placeholder="图片地址" value="https://unpkg.com/outeres@0.0.5/demo/000.jpg" class="layui-input">
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatarUpload">
                                    <i class="layui-icon">&#xe67c;</i>上传头像
                                </button>
                                <button class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看图片</button >
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" value="202210531018" readonly class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">不可修改</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nickname" value="阿盛" lay-verify="nickname" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男" checked>
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号</label>
                                <div class="layui-input-inline layui-input-wrap">
                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
                                </div>
                                <div class="layui-form-mid" style="padding: 0!important;">
                                    <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" lay-verify="email" placeholder="有值时才校验" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">城市选择</label>
                            <div class="layui-input-inline">
                                <select name="quiz1">
                                    <option value="">请选择省</option>
                                    <option value="浙江" selected>浙江省</option>
                                    <option value="你的工号">江西省</option>
                                    <option value="你最喜欢的老师">福建省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="quiz2">
                                    <option value="">请选择市</option>
                                    <option value="杭州">杭州</option>
                                    <option value="宁波" disabled>宁波</option>
                                    <option value="温州">温州</option>
                                    <option value="温州">台州</option>
                                    <option value="温州">绍兴</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <select name="quiz3">
                                    <option value="">请选择县/区</option>
                                    <option value="西湖区">西湖区</option>
                                    <option value="余杭区">余杭区</option>
                                    <option value="拱墅区">临安市</option>
                                </select>
                            </div>
                            <div class="layui-form-mid layui-text-em">
                                <i class="layui-icon layui-icon-tips" lay-tips="{
                                    content: '此处只是演示联动排版，并未做联动交互',
                                    margin: '0 0 0 -10px'
                                  }"></i>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">在校身份</label>
                            <div class="layui-input-block">
                                <input type="radio" name="role" value="" title="教师">
                                <input type="radio" name="role" value="" title="辅导员">
                                <input type="radio" name="role" value="" title="学生" checked>
                            </div>
                        </div>
                        <div class="layui-col-lg6">
                            <label class="layui-form-label">身份标签</label>
                            <div class="layui-input-block">
                                <select name="type" lay-verify="required" lay-filter="aihao">
                                    <option value=""></option>
                                    <option value="0">大一</option>
                                    <option value="1">大二</option>
                                    <option value="2">大三</option>
                                    <option value="3">大四</option>
                                    <option value="4">已毕业</option>
                                    <option value="4">新生</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">爱好标签</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="arr1[0]" lay-skin="tag" title="Python" checked>
                                <input type="checkbox" name="arr1[1]" lay-skin="tag" title="Java">
                                <input type="checkbox" name="arr1[2]" lay-skin="tag" title="web">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">生日</label>
                                <div class="layui-input-inline layui-input-wrap">
                                    <div class="layui-input-prefix">
                                        <i class="layui-icon layui-icon-date"></i>
                                    </div>
                                    <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">个人签名</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重新填写</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script src="layui/layui.js"></script>
<script>
    layui.use( function(){
        var element = layui.element;
        var $ = layui.$;
        var upload = layui.upload;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var util = layui.util;

        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url: 'http://localhost:8080/campus/upload', // 实际使用时改成您自己的上传接口即可。
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // …
                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

        // 自定义验证规则
        form.verify({
            pass: function(value) {
                if (!/(.+){6,12}$/.test(value)) {
                    return '密码必须 6 到 12 位';
                }
            }
        });

        // 指定开关事件
        form.on('switch(switchTest)', function(data){
            layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
        });

        // 提交事件
        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });

        // 日期
        laydate.render({
            elem: '#date'
        });

        // 普通事件
        util.on('lay-on', {
            // 获取验证码
            "get-vercode": function(othis){
                var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
                // 验证通过
                if(isvalid){
                    layer.msg('手机号规则验证通过');
                    // 此处可继续书写「发送验证码」等后续逻辑
                    // …
                }
            }
        });
    });
</script>
</body>
</html>